<template>
  <div class="role-permission">
    <!-- 角色权限设置 -->
    <div class="container">
      <div class="model-title">角色权限设置</div>
      <div class="form-box">
        <div class="filter-box">
           <!-- <el-button type="danger" @click="addRole">用户权限新增</el-button> -->
           <div>
             <el-input class="filter-input" v-model="filters.phone" placeholder="请输入用户手机号"></el-input>
              <el-input class="filter-input" v-model="filters.userId" placeholder="请输入用户id"></el-input>
              <el-input class="filter-input" v-model="filters.roleId" placeholder="请输入代理商ID编号"></el-input>

              <el-button type="danger" @click="queryList">查询</el-button>
           </div>
        </div>
        <div class="role-list-box">
          <div class="role-list" v-if="roleList.length !== 0">
              <table border="0" cellspacing="0">
                <thead>
                  <tr>
                    <th v-for="item in roleListHeader" :key="item.prop">
                      <div class="table-cell" v-html="item.label"></div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(cell,index) in roleList" :key="index">
                    <td>
                      <div class="table-cell">
                        <span v-html="'# '+(index+1)"></span>
                      </div>
                    </td>
                    <td>
                      <div class="table-cell">
                        <span v-html="cell.userId"></span>
                      </div>
                    </td>
                    <td>
                      <div class="table-cell">
                        <span v-html="cell.phone || '--'"></span>
                      </div>
                    </td>
                    <td>
                      <div class="table-cell">
                        <span v-html="roleLabel[cell.roleId]"></span>
                      </div>
                    </td>
                    <td>
                      <div class="table-cell">
                        <span v-html="cell.roleId"></span>
                      </div>
                    </td>
                    <td>
                      <div class="table-cell">
                        <span v-html="cell.status=='0'?'启用':'禁用'"></span>
                      </div>
                    </td>
                    <td>
                      <div class="table-cell">
                        <span v-html="cell.createTime"></span>
                      </div>
                    </td>
                    <td>
                      <div class="table-cell">
                        <el-button @click="updateRole(cell)">修改</el-button>
                        <!-- <el-button type="danger" @click="delRole(cell)">删除</el-button> -->
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
          </div>
          <div v-else class="no-data">
             暂无数据
          </div>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <el-dialog
        :title="dialog.title"
        :visible.sync="dialog.show"
        class="model-box"
        >
          <div v-if="dialog.action === 'add-role'">
            <el-form :model="addRoleForm" ref="addRoleForm" label-width="100px">
                <el-form-item label="代理商ID编号">
                  <el-input v-model="addRoleForm.userId" placeholder="请输入代理商ID编号"></el-input>
                </el-form-item>
                <el-form-item label="后台登陆角色">
                  <el-select v-model="addRoleForm.roleId">
                    <el-option
                      v-for="item in roleTypeList" 
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitAdd" type="danger">提交添加</el-button>
                </el-form-item>
            </el-form>
          </div>
          <div v-else-if="dialog.action === 'update-role'">
               <el-form :model="currentCell" ref="update-role" label-width="100px">
                  <el-form-item label="代理商ID编号">
                    <el-input disabled v-model="currentCell.userId" placeholder="请输入代理商ID编号"></el-input>
                  </el-form-item>
                  <el-form-item label="后台登陆角色">
                    <el-select v-model="currentCell.roleId">
                      <el-option
                        v-for="item in roleTypeList" 
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                      <el-button @click="submitUpdate" type="danger">提交修改</el-button>
                  </el-form-item>
              </el-form>
          </div>
          <div v-else-if="dialog.action === 'del-role'">
            <div class="hot-tips">你确定要删除以下用户权限吗？</div>
            <el-form :model="currentCell" ref="del-role" label-width="100px">
                  <el-form-item label="代理商ID编号">
                    <el-input disabled v-model="currentCell.userId" placeholder="请输入代理商ID编号"></el-input>
                  </el-form-item>
                  <el-form-item label="后台登陆角色">
                    <el-select disabled v-model="currentCell.roleId">
                      <el-option
                        v-for="item in roleTypeList" 
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                      <el-button @click="submitDel" type="danger">提交删除</el-button>
                  </el-form-item>
              </el-form>
          </div>
          <div v-else>
            nothing ...
          </div>
      </el-dialog>


  </div>
</template>

<script>
export default {
  name:'role-permission',
  data () {
    return {   
        currentCell:{
          userId:null,
          roleId:null
        },    
        filters:{
          roleId:"",
          userId:"",
          phone:''
        },
        dialog:{
          show:false,
          title:"",
          action:""
        },
        addRoleForm:{
          userId:null,
          roleId:5
        },
        roleList:[],
        roleListHeader:[
          {prop:"index",label:"序号"},
          {prop:"userId",label:"用户ID"},
          {prop:"phone",label:"用户手机号"},
          {prop:"rolename",label:"角色名称"},
          {prop:"roleId",label:"角色编号"},
          {prop:"status",label:"状态"},
          {prop:"createTime",label:"日期"},
          {prop:"opreat",label:"操作"},
        ],
        roleTypeList:[
          {value:1,label:"系统管理"},
          {value:2,label:"贴牌商"},
          {value:3,label:"代理商"},
          {value:4,label:"审核员"},
          {value:5,label:"普通用户"},
          {value:6,label:"台码代理"},
        ],
        roleLabel:{
          'undefined':'未知',
          '1':'系统管理',
          '2':'贴牌商',
          '3':'代理商',
          '4':'审核员',
          '5':'普通用户',
          '6':'台码代理',
        }
    };
  },
  components: {},
  created() {
    this.queryList();
  },
  mounted() {},
  methods: {
    addRole(){
      // 添加
      this.addRoleForm.userId = sessionStorage.getItem(33);
      this.dialog.action = "add-role";
      this.dialog.title = "添加用户权限";
      this.dialog.show = true;
    },
    updateRole(cell){
      // 修改
      this.currentCell.roleId = cell.roleId;
      this.currentCell.userId = cell.userId;
      this.dialog.action = "update-role";
      this.dialog.title = "修改用户权限";
      this.dialog.show = true;
    },
    delRole(cell){
      // 删除
      this.currentCell.roleId = cell.roleId;
      this.currentCell.userId = cell.userId;
      this.dialog.action = "del-role";
      this.dialog.title = "删除用户权限";
      this.dialog.show = true;
    },
    queryList(){
      // 查询
      let url = `user/userrole/find`,
          params = `size=1000`;
      for(let key in this.filters){
        if(this.filters[key] !== undefined &&this.filters[key] !== null && this.filters[key] !== ''  ){
          params = params+`&${key}=${this.filters[key]}`;
        }
      } 
      this.$Http.post(url,params).then(res=>{
        if(res.data.content.length !== 0){
          this.roleList = res.data.content
        }else{
          this.$notify.info({
            title: '提示',
            message: "暂无数据"
          });
        }
      }).catch(err=>{
        this.$notify.error({
            title: '错误',
            message: '获取信息失败！'
          });
      })
    },
    submitAdd(){
      if(this.addRoleForm.userId===""||this.addRoleForm.userId===null){
        this.$message.error("请输入用户id");
        return;
      }
      if(this.addRoleForm.roleId===""||this.addRoleForm.roleId===null){
        this.$message.error("请选择登录角色");
        return;
      }
      let url=`user/userrole/add`,
          params = `userId=${this.addRoleForm.userId}&roleId=${this.addRoleForm.roleId}`
      this.$Http.post(url,params).then(res=>{
         this.$notify.info({
           title:"提示",
           message:res.data.resp_message
         })
         this.dialog.show = false;
         this.queryList();
      }).catch(err=>{ 
        this.$notify.info({
           title:"错误",
           message:"添加失败！"
         })
      })
    },
    submitUpdate(){
      
      let url=`user/userrole/up`,
          params = `userId=${this.currentCell.userId}&roleId=${this.currentCell.roleId}`
      this.$Http.post(url,params).then(res=>{
         this.$notify.info({
           title:"提示",
           message:res.data.resp_message
         })
         this.dialog.show = false;
         this.queryList();
      }).catch(err=>{ 
        this.$notify.info({
           title:"错误",
           message:"修改失败！"
         })
      })
    },
    submitDel(){
      let url=`user/userrole/del`,
          params = `userId=${this.currentCell.userId}&roleId=${this.currentCell.roleId}`
      this.$Http.post(url,params).then(res=>{
         this.$notify.info({
           title:"提示",
           message:res.data.resp_message
         })
         this.dialog.show = false;
         this.queryList();
      }).catch(err=>{ 
        this.$notify.info({
           title:"错误",
           message:"删除失败！"
         })
      })
    }

  }
}

</script>
<style scoped>
.role-permission{
  padding: 20px;
  box-sizing: border-box;
  min-width: 700px;
}
.filter-box{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #ededed;
}
.filter-input{
  width: 200px;
  margin-right: 10px;
}
.no-data{
  text-align: center;
  padding: 20px ;
  min-width: 200px;
  color: #909399;
}
table{
    background-color: #FFF;
    width: 100%;
    font-size: 12px;
}
th{
    position: relative;
    word-wrap: normal;
    text-overflow: ellipsis;
    vertical-align: middle;
    border-bottom: 1px solid #ebeef5;
    
}
thead{
    padding: 8px 0;
    color: #909399;
}
tr{
    padding: 8px 0;
}
tr:hover{
    background-color: #F5F7FA;
}
td{
    border: none;
    border-bottom: 1px solid #ebeef5;
}
.table-cell{
    white-space: normal;
    word-break: break-all;
    line-height: 22px;
    padding: 10px 10px;
    text-align: center;
    min-width: 40px;
    box-sizing: border-box;
}
.hot-tips{
  color: red;
  padding: 10px 20px;
}
</style>